import { CydonElement, define } from 'cydon'
import { Filter as F } from '../api'

/**
 * 筛选器
 */
export type Filter = {
	/** 列名 */
	key: string
	/** 筛选操作 */
	op: F[1]
	/** 筛选值 */
	value: string
	/** 逻辑操作 */
	conj: 0 | 1 | 2
	/** 是否有效 */
	valid: boolean
}

/**
 * 排序设置
 */
export type SortSetting = {
	/** 排序键 */
	index: number
	/** 排序方向：1值升序，2值降序，3长度升序，4长度降序，5随机 */
	dir: 1 | 2 | 3 | 4 | 5
}

export const getFilters = (f: DataFilter): F[] =>
	f.filters.map(({ key, op, value, conj }) => [key, op, value, conj])

/**
 * 数据筛选器
 * @element data-filter
 */
@define('data-filter')
export class DataFilter extends CydonElement {
	/** 筛选器标签 */
	filtersTab!: HTMLDetailsElement
	/** 页内筛选器标签 */
	localFiltersTab!: HTMLDetailsElement
	/** 键名 */
	keys!: string[]
	/** 列名 */
	columns!: string[]
	/** 排序键 */
	sortKeys: SortSetting[] = []
	/** 排序模式 */
	sortPattern = ''

	getSortPattern(keys: string[]) {
		return this.sortPattern || this.sortKeys.map(({ index: i, dir }) =>
		(dir == 5 ? 'random()' : (dir > 2 ? 'length(' + keys[i] + ')' : keys[i])
			+ (dir & 1 ? '' : ' desc'))).join(',')
	}

	get isLastFilter() {
		return this.i == this.filters.length - 1
	}

	/** 筛选器 */
	filters: Filter[] = []
	/** 页内筛选器 */
	localFilters: Filter[] = []

	i!: number
	f!: Filter

	connectedCallback() {
		super.connectedCallback()
		// 展开筛选器时添加筛选器
		this.filtersTab.addEventListener('toggle', e => {
			if ((<HTMLDetailsElement>e.target).open && !this.filters.length)
				this.addFilter(6)
		})
		this.localFiltersTab.addEventListener('toggle', e => {
			if ((<HTMLDetailsElement>e.target).open && !this.localFilters.length)
				this.addLocalFilter()
		})
	}

	checkValidity(e: Event) {
		try {
			if (this.f.op > 1)
				RegExp(this.f.value);
			(<HTMLInputElement>e.target).setCustomValidity('')
		} catch {
			(<HTMLInputElement>e.target).setCustomValidity('正则表达式错误')
		}
	}

	//#region 筛选器
	/** 添加筛选器 */
	addFilter(op: Filter['op'] = 0) {
		this.filters.push({
			key: this.keys[1],
			op,
			value: '',
			conj: 0,
			valid: true
		})
	}

	/** 删除筛选器 */
	delFilter(index: number) {
		this.filters.splice(index, 1)
	}

	/** 清空筛选器 */
	clearFilters() {
		this.filters = []
	}
	//#endregion
	//#region 页内筛选器
	/** 添加页内筛选器 */
	addLocalFilter() {
		this.localFilters.push({
			key: this.keys[1],
			op: 0,
			value: '',
			conj: 0,
			valid: true
		})
	}

	/** 删除页内筛选器 */
	delLocalFilter(index: number) {
		this.localFilters.splice(index, 1)
	}

	/** 清空页内筛选器 */
	clearLocalFilters() {
		this.localFilters = []
	}
	//#endregion
	//#region 排序器
	/** 添加排序器 */
	addSortKey() {
		this.sortKeys.push({ index: 0, dir: 1 })
	}

	/** 删除排序器 */
	delSortKey(index: number) {
		this.sortKeys.splice(index, 1)
	}

	/** 清空排序器 */
	clearSortKeys() {
		this.sortKeys = []
	}
	//#endregion
}

declare global {
	interface HTMLElementTagNameMap {
		'data-filter': DataFilter
	}
}